<template>
  <div>
    <div :id="graphId" ref="echartsGraph" class="echarts-graph"></div>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  props: {
    graphId: {
      type: String,
      default: "graphId",
    },
    graphs: {
      type: Object,
      default: () => {
        return {
          nodes: [
            { name: "子模块同时故障" },
            { name: "桥臂开路" },
            { name: "多个子模块同时故障" },
          ],
          links: [
            {
              source: "桥臂开路",
              target: "子模块同时故障",
              value: "上一级故障",
            },
            {
              source: "子模块同时故障",
              target: "多个子模块同时故障",
              value: "上一级故障",
            },
          ],
        };
      },
    },
  },
  name: "Graph",
  data() {
    return {
			timer: new Date().getTime()
    };
  },
	watch: {
		graphs: {
			handler(data) {
				this.$nextTick(() => {
					this.initEchart();
				});
			},
			deep: true,
		},
	},
  mounted() {
    // const myChart = this.$echarts.init(document.getElementById('echartsGraph'));
    // this.$nextTick(() => {
      this.initEchart();
    // });
  },
  methods: {
    initEchart() {
      const myChart = this.$echarts.init(
        document.querySelector(`#${this.graphId}`)
      );
      let option = {
        tooltip: {
          confine: true,
          show: true,
          showContent: true,
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(3, 15, 46, .8)", //tooltip背景色
          borderColor: "rgba(0,255,211,0.19)", //tooltip边框颜色
          borderWidth: 1,
          extraCssText: "z-index: 99",
          formatter: "{b}",
        },
        // formatter:this.formatterHover,

        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "force",
            legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
            hoverAnimation: true, // 是否开启鼠标悬停节点的显示动画
            coordinateSystem: null, // 坐标系可选
            xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
            yAxisIndex: 0, // y轴坐标
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12,
                  color: "#FFF",
                },
                formatter: "{c}",
              },
            },
            force: {
              // 力引导图基本配置
              // initLayout: , // 力引导的初始化布局，默认使用xy轴的标点
              repulsion: 500, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
              gravity: 0.01, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength: 200, // 边的两个节点之间的距离，这个距离也会受 repulsion影响 。值越大则长度越长
              layoutAnimation: false, // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
              // 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
              friction: 0.2,
            },
            scaleLimit: {
              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
              min: 0.5, //最小的缩放值
              max: 9, //最大的缩放值
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启，true 为都开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'
            // nodeScaleRatio: 0.6, // 鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
            nodeScaleRatio: 0,
            draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
            focusNodeAdjacency: false,
            // symbol: 'rect',
            // symbol:require('@/assets/images/graph-bg.png'),
            // symbol: `image://${icon}`,
            symbolSize: [70, 70],
            // symbolSize:70,
            // symbolOffset:[15,0],
            // symbolSize:70,
            itemStyle: {
              // ========图形样式，有 normal 和 emphasis 两个状态。
              // normal 是图形在默认状态下的样式；
              // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
              normal: {
                // 默认样式
                label: {
                  show: true,
                  color: "#fff",
                  width: 100,
                  overflow: "truncate",
                },
                borderType: "solid", // 图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
                borderWidth: 2, // 图形的描边线宽。为 0 时无描边。
                opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              },
              emphasis: {
                // 高亮状态
              },
            },
            data: this.graphs.nodes,
            // links: [],
            links: this.graphs.links,
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
              color: "RGBA(100, 166, 214, 1)",
            },
          },
        ],
      };
      // 绘制图表
      myChart.setOption(option, true, true);
    },
  },
};
</script>

<style scoped>
.echarts-graph {
  height: 100%;
  width: 100%;
}
</style>
